<style>
    .picmatrix{
        width:406px;
        
        position: relative;
        border: 1px solid ;
    }
    
    .picmatrix .piccell{
        width:50px;
        height: 50px;
        float:left;
    }
</style>

<div class="picmatrix">
	<?php 
		$row = $this->row;
		$col = $this->col;
        $matrix = $this->matrix;
        $matrixImg = $this->matrixImg;
	?>
    
	<?php for($i = 0; $i < $row + 2; $i++):?>
        <?php if($i == 1):?>
             <div class="piccell row-0 col-<?php echo $i;?> "></div>
        <?php else:?>
            <div class="piccell row-0 col-<?php echo $i;?> notuse "></div>
        <?php endif;?>
        
    <?php endfor; ?>
    
    <?php $index = 0;?>
    <?php for($j = 1; $j <= $row ; $j++):?>
         <?php for($i = 0; $i < $row + 2; $i++):?>
            <?php if($i == 0 || $i == $row+1):?>
                 <div class="piccell row-<?php echo $j; ?> col-<?php echo $i;?> notuse "></div>
            <?php else:?>
                <?php $offset = $matrix[$j][$i] -1?>
                <div class="piccell row-<?php echo $j; ?> col-<?php echo $i;?>" style="background-image: url(<?php echo $matrixImg[$offset]?>);"></div>
                <?php $index++;?>
            <?php endif;?>
         <?php endfor; ?>
    <?php endfor; ?>
    
    <?php for($i = 0; $i < $row + 2; $i++):?>
        <div class="piccell row-<?php echo $row+1; ?> col-<?php echo $i;?> notuse "></div>
    <?php endfor; ?>
    
	
</div>


